<template>
  <div class="article" @click="$router.push(`/answers/${id}/details`)">
    <div class="answers-number flex-jac">
      <span class="number">{{ answerCount }}</span>
      <span class="answers-number__title">回答</span>
    </div>
    <div class="reading-number flex-jac">
      <span class="number">{{ readCount }}</span>
      <span class="reading-number__title">阅读</span>
    </div>
    <div class="content flex-jc">
      <span class="article__title">{{ title }}</span>
      <div class="article__footer">
        <div class="tags">
          <el-tag class="tag" @click.stop="sendTag" type="info" v-for=" tag  in  tags " :key="tag.id">{{ tag.tagName
          }}</el-tag>
        </div>
        <div class="right">
          <span class="username">{{ user.nickname }}</span>
          <span class="date">{{ createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IArcticleList } from '@/interface/IArticle';

defineProps<IArcticleList>();

function sendTag() {
  console.log("标签");

}
</script>

<style lang="scss" scoped>
.article {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  gap: 10px;

  .answers-number,
  .reading-number {
    flex-direction: column;
    padding: 6px 10px;
    gap: 6px;
    font-size: 12px;
    color: #0D9B66;

  }

  .answers-number {
    border: 1px solid #ccc;
  }

  .content {
    flex-direction: column;
    flex: 1;
    gap: 10px;
  }

  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .tags {
      display: flex;
      gap: 6px;
      color: #129D69;
    }

    .right {
      display: flex;
      gap: 16px;



      .username {
        color: #129D69;
        position: relative;
        font-size: 14px;

        &::after {
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #eee;
          right: 0;
          top: 50%;
          transform: translate(200%, -50%);
          content: "";
        }
      }

      .date {
        font-size: 14px;
        color: #727B82;
      }
    }
  }
}
</style>